<template>
  <div class="register">
    <header class="my-header" v-if="!success">
      <comp-header>
        <template v-slot:ctitle
          ><span class="fa fa-angle-left" @click="$router.go(-1)"></span
          >&nbsp;&nbsp;&nbsp;注册</template
        >
        <template v-slot:cicon>
          <span class="fa fa-ellipsis-h"></span>
        </template>
      </comp-header>
    </header>
    <div class="reg-box" v-if="!success">
      <div class="title">华支付</div>
      <div class="username">
        <input type="text" placeholder="请输入注册手机号" v-model="username" />
        <span
          class="fa fa-check-circle icon icon-1"
          v-if="isiphone && isiphonenum == 1"
        ></span>
        <span
          class="fa fa-times-circle icon icon-2"
          v-if="isiphone && isiphonenum == 2"
        ></span>
        <span class="send" v-if="!isreg && isregnum == 0" @click="isregiter"
          >验证</span
        >
        <span class="send" v-if="isreg && isregnum == 1">已注册</span>
        <span class="send" v-if="isreg2 && isregnum == 1">未注册</span>
      </div>
      <div class="userpassword">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="userpassword"
        />
      </div>
      <div class="sure">
        <input type="password" placeholder="确认密码" v-model="sure" />
        <span
          class="fa fa-check-circle icon icon-1"
          v-if="issure && issurenum == 1"
        ></span>
        <span
          class="fa fa-times-circle icon icon-2"
          v-if="issure && issurenum == 2"
        ></span>
      </div>
      <div class="iphone">
        <input type="text" placeholder="请输入手机号" v-model="iphone" />
        <span class="send" v-if="!issend" @click="send">发送验证码</span>
        <span class="send" v-if="issend">已发送 {{ sixty }}s</span>
      </div>
      <div class="yanzhengma">
        <input type="text" placeholder="验证码" v-model="yanzhengma" />
        <span
          class="fa fa-times-circle icon icon-2"
          v-if="isyangzhengma"
        ></span>
      </div>
      <div class="btn"><button @click="register">注册</button></div>
    </div>
    <div class="isregister" v-if="success">
      <div class="isregister-box">
        <div class="text">注册成功</div>
        <button @click="login">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import compHeader from "@/components/comp-header.vue";
export default {
  name: "Register",
  components: {
    compHeader: compHeader,
  },
  data() {
    return {
      username: "",
      isiphone: false,
      isregnum: 0,
      isreg: false,
      isreg2: false,
      isiphonenum: 0,
      userpassword: "",
      sure: "",
      issure: false,
      issurenum: 0,
      iphone: "",
      issend: false,
      sixty: 60,
      yanzhengma: "",
      isyangzhengma: false,
      success: false,
      reg: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
    };
  },
  methods: {
    isregiter() {
      let isregisterpro = axios.get(
        "http://music.kele8.cn/cellphone/existence/check?phone=" + this.username
      );
      isregisterpro
        .then((response) => {
          if (response.data.exist != -1) {
            this.isreg = true;
            this.isiphone = true;
            this.isregnum = 1;
            this.isiphonenum = 2;
          }
          if (response.data.exist == -1) {
            this.isreg2 = true;
            this.isregnum = 1;
          }
        })
        .catch((reject) => {
          console.log(reject);
        });
    },
    send() {
      if (this.iphone.length == 11 && this.reg.test(this.iphone)) {
        this.issend = true;
        let d = setInterval(() => {
          if (this.sixty == 0) {
            this.issend = false;
            this.sixty = 60;
            clearInterval(d);
          }
          this.sixty--;
        }, 1000);
        let pro = axios.get(
          "http://music.kele8.cn/captcha/sent?phone=" + this.iphone
        );
        pro
          .then((response) => {
            console.log(response.data.code);
          })
          .catch((reject) => {
            console.log(reject);
          });
      }
    },
    register() {
      if (this.username == "") {
        this.isiphone = true;
        this.isiphonenum = 2;
        return false;
      } else if (this.userpassword == "" || this.sure == "") {
        this.issurenum = 2;
        this.issure = true;
        return false;
      } else if (this.iphone == "" || this.yanzhengma == "") {
        return false;
      }
      let registeryanzhengma = axios.get(
        "http://music.kele8.cn/captcha/verify?phone=" +
          this.iphone +
          "&captcha=" +
          this.yanzhengma
      );
      let registerpro = axios.get(
        "http://music.kele8.cn/register/cellphone?captcha=" +
          this.yanzhengma +
          "&phone=" +
          this.iphone +
          "&password=" +
          this.userpassword +
          "&nickname=" +
          this.username
      );
      registeryanzhengma
        .then((response) => {
          console.log(response.data.code);
        })
        .catch((reject) => {
          this.isyangzhengma = true;
          console.log(reject);
        });
      registerpro
        .then((response) => {
          this.success = true;
          console.log(response);
        })
        .catch((reject) => {
          console.log(reject);
        });
    },
    login() {
      this.$router.push({ path: "/login" });
    },
  },
  watch: {
    sure(v) {
      if (v == this.userpassword) {
        this.issurenum = 1;
        this.issure = true;
      } else if (v != this.userpassword) {
        this.issurenum = 2;
        this.issure = true;
      }
      if (v == "") {
        this.issurenum = 0;
        this.issure = false;
      }
    },
    username(v) {
      if (v.length == 11 && this.reg.test(v)) {
        this.isiphonenum = 1;
        this.isiphone = true;
      } else if (v.length != 11 || this.reg.test(v)) {
        this.isiphone = true;
        this.isiphonenum = 2;
        this.isreg = false;
        this.isreg2 = false;
        this.isregnum = 0;
      }
      if (v == "") {
        this.isiphone = false;
        this.isiphonenum = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100vh;
  background: url(../assets/online.png) no-repeat;
  background-size: (960px * (7/10)) (491px * (7/10));
  background-position: (-350px * (7/10)) (0px * (7/10));
  background-color: #01064a;
  .reg-box {
    width: 300px;
    height: 390px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 150px;
    background-color: #fff;
    .title {
      font-size: 30px;
      color: #513eb2;
      font-weight: bolder;
    }
    .username {
      margin-top: 30px;
    }
    .send,
    .icon {
      display: block;
      width: 80px;
      position: absolute;
      top: 8px;
      right: 45px;
      font-size: 12px;
    }
    .icon {
      font-size: 18px;
      top: 10px;
      right: 20px;
    }
    .icon-1 {
      color: #02a00a;
    }
    .icon-2 {
      color: #fa402f;
    }
    div {
      box-sizing: border-box;
      height: 30px;
      width: 300px;
      font-size: 14px;
      margin: 20px auto;
      text-align: center;
      position: relative;
      span {
        display: inline-block;
        width: 65px;
      }
    }
    input {
      height: 30px;
      width: 200px;
      background-color: transparent;
      outline: none;
      margin-left: 10px;
      border: 1px solid #ccc;
      text-indent: 10px;
      border-radius: 5px;
    }
    button {
      font-size: 18px;
      letter-spacing: 20px;
      text-indent: 20px;
      width: 260px;
      height: 40px;
      border-radius: 20px;
      color: #fff;
      background-color: #513eb2;
    }
  }
}
.isregister-box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  .text {
    margin-top: 50px;
    margin-bottom: 30px;
  }
  button {
    background-color: #02a00a;
    width: 150px;
    height: 30px;
    border-radius: 15px;
  }
}
</style>